var deptTree = Vue.extend({
  name: 'department-tree',
  template:[
    '<ul id="deptTree"></ul>'
  ].join('')
});


Vue.component('deptTree', deptTree);

var deptTreeDom = '';

function deptTreeSelect (t) {
    deptTreeDom = $(t);
    layui.use('layer', function(){
      layerDeptTree = layer.open({
        title: '机构选择',
          type : 1,
          area : [ '50%', '80%' ],
          scrollbar : false,
          zIndex : 100,
          cancel: function () {
              // companyTreeModel.render();
          },
          content : $('.department-tree-modules')
      });
  });
}

$(function () {
  $.ajax({
      url: '/depart/list',
      success: function (res) {
          layui.use('tree', function(){
            layui.tree({
              elem: '#deptTree'
              ,nodes: treeSpread(res.data)
              ,click: function(node){
                  deptTreeDom.val(node.name)
                  deptTreeDom.siblings('input').val(node.id)
                  deptValueChange()
                  layer.close(layerDeptTree)
              }  
            });
          });
      }
  })
})

// 定义全部打开，暂时没有找到较好的方法
function treeSpread (list) {
    $.each(list, function (i,t) {
        t.spread = true
        t.children.length > 0 ? treeSpread(t.children) : '';
    })
    return list
}

/**** 使用手册 ****/
/*

<script src="../../components/deptTree.js"></script>

<input type="hidden" tree-id="formList.parentId" name="parentId" v-model="formList.parentId" />
<input type="text" tree-id="formList.parentName" name="parentName" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.parentName" readonly onclick="deptTreeSelect(this)">

<form class="layui-form department-tree-modules" style="display: none;">
    <dept-tree></dept-tree>
</form>

*/

